<template xmlns="">
    <div class="login_first_01">
      <div class="login_logo"></div>
      <div class="login_button">
        <el-button @click="closeLogin" id="btn01" style="font-size: 10px; ">
          <i class="el-icon-close"></i>
        </el-button>
      </div>
<!--      <el-row>
        <el-button @click="open" style="display: none">默认按钮</el-button>
      </el-row>-->
      <div class="login_tabs">

        <el-tabs v-model="activeName" @tab-click="handleClick" >
          <el-tab-pane label="密码登录" name="first">
             <FormLogin @closeLogin="closeLogin"></FormLogin>
          </el-tab-pane>
          <el-tab-pane label="短信登录" name="second">
               <ShortMessage></ShortMessage>
          </el-tab-pane>
          <el-tab-pane label="扫码登陆" name="third">
            <QrCode></QrCode>
          </el-tab-pane>
          <el-tab-pane label="注册账号" name="fourth">    <!--王改名字了-->
            <Register></Register>
          </el-tab-pane>
        </el-tabs>
      </div>

    </div>
</template>

<script>
import {Message, Notification} from 'element-ui';
import Register from "@/components/login/Register";
export default {
  name: "Login",
  components: {Register},
  data() {
    return {
      showBack: true,
      activeName: 'first',
    }
  },
  beforeDestroy() {
    // alert(23433)
    // Message.success('已关闭');
    // alert(23433)
  },
  methods: {
    closeLogin() {
      this.$store.dispatch('code/update_showBack', false)
    },
/*    open() {
      Notification.success({
        title: 'Info',
        message: '这是一条没有关闭按钮的消息',
        showClose: false,
        position: 'bottom-right',
      });
    },*/
    handleClick(tab, event) {
      // alert('dsf');
      // console.log(tab, event);
    },
  },
}


</script>

<style lang="scss" scoped>
.fade-login-enter-active {
  transition: opacity 1s;
}
.fade-login-enter {
  opacity: 0;
}
.fade-login-leave-to {
  opacity: 0;
}
.login_first_01 {
  transition:  width .3s;
  width: 400px;
  height: 400px;
  background: rgba(251, 252, 252);
  opacity: 1;
  overflow: hidden;
}
.login_tabs {
  margin-left: 10px;
  overflow: hidden;
}
.login_button {
  margin-left: 345px;
  margin-top: -40px;
}
.login_logo {
  top: 5px;
  left: 5px;
  width: 70px;
  height: 40px;
  background: url('../../assets/login/first/123005.png') no-repeat;
  background-size: 100% 100%;
}
</style>
